<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>在线支付</p>
		</header>

		<!-- 订单信息部分 -->
		<h3>订单信息：</h3>
		<div class="order-info">
			<p>
				{{ orders.business.businessName }}
				<i class="fa fa-caret-down" @click="detailetShow"></i>
			</p>
			<p>&#165;{{ orders.orderTotal}}</p>
		</div>

		<!-- 订单明细部分 -->
		<ul class="order-detailet" v-show="isShowDetailet">
			<li v-for="item in orders.list" :key="item.id">
				<p>{{ item.food.foodName }} x {{ item.quantity }}</p>
				<p>&#165;{{ item.food.foodPrice * item.quantity }}</p>
			</li>
			<li>
				<p>配送费</p>
				<p>&#165;{{ orders.business.deliveryPrice }}</p>
			</li>
		</ul>

		<!-- 支付方式部分 -->
		<ul class="payment-type">
			<li @click="selectPaymentMethod('alipay')" :class="{ selected: selectedPaymentMethod === 'alipay' }">
				<img src="../assets/alipay.png" />
				<i class="fa fa-check-circle" v-if="selectedPaymentMethod === 'alipay'"></i>
			</li>
			<li @click="selectPaymentMethod('wechat')" :class="{ selected: selectedPaymentMethod === 'wechat' }">
				<img src="../assets/wechat.png" />
				<i class="fa fa-check-circle" v-if="selectedPaymentMethod === 'wechat'"></i>
			</li>
		</ul>
		<div class="payment-button">
			<button @click="confirmPayment">确认支付</button>
		</div>

		<!-- 底部菜单部分 -->
		<Footer></Footer>
	</div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import Footer from '../components/Footer.vue';
import qs from 'qs';

// 使用Vue Router
const router = useRouter();
const route = useRoute();

// 定义响应式数据
const orderId = route.query.orderId;
const orders = ref({
	business: {},
	list: []
});
const isShowDetailet = ref(false);
const selectedPaymentMethod = ref(null);  // 存储选中的支付方式

// 方法
const detailetShow = () => {
	isShowDetailet.value = !isShowDetailet.value;
};

const selectPaymentMethod = (method) => {
	selectedPaymentMethod.value = method;  // 设置选中的支付方式
};

const confirmPayment = () => {
	if (!orders.value.business || !orders.value.business.businessId) {
		alert('订单信息不完整，请稍后重试');
		return;
	}

	if (!selectedPaymentMethod.value) {
		alert('请选择支付方式');
		return;
	}

	// 模拟支付成功
	alert('支付成功！');
	// 更新订单状态
	axios.post('OrdersController/turnOrderState', qs.stringify({
		orderId: orderId
	}))
		.then(response => {
			if (response.data === 1) {
				// 如果状态更新成功，则跳转到订单列表页面
				router.push({ path: '/orderList' });
			} else {
				alert('订单状态更新失败，请稍后重试');
			}
		})
		.catch(error => {
			console.error(error);
			alert('订单状态更新出错');
		});
};

// 生命周期函数
onMounted(() => {
	axios.post('OrdersController/getOrdersById', qs.stringify({
		orderId
	}))
		.then(response => {
			orders.value = response.data;
		})
		.catch(error => {
			console.error(error);
		});

	// 禁止返回到订单确认页面
	history.pushState(null, null, document.URL);
	window.onpopstate = () => {
		router.push({ path: '/index' });
	};
});

onBeforeUnmount(() => {
	window.onpopstate = null;
});
</script>

<style scoped>
/****************** 总容器 ******************/
.wrapper {
	width: 100%;
	height: 100%;
}

/****************** header部分 ******************/
.wrapper header {
	width: 100%;
	height: 12vw;
	background-color: royalblue;
	color: #fff;
	font-size: 4.8vw;

	position: fixed;
	left: 0;
	top: 0;
	z-index: 1000;

	display: flex;
	justify-content: center;
	align-items: center;
}

/****************** 订单信息部分 ******************/
.wrapper h3 {
	margin-top: 12vw;
	box-sizing: border-box;
	padding: 4vw 4vw 0;

	font-size: 4vw;
	font-weight: 300;
	color: #999;
}

.wrapper .order-info {
	box-sizing: border-box;
	padding: 4vw;
	font-size: 4vw;
	color: #666;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .order-info p:last-child {
	color: orangered;
}

/****************** 订单明细部分 ******************/
.wrapper .order-detailet {
	width: 100%;
}

.wrapper .order-detailet li {
	width: 100%;
	box-sizing: border-box;
	padding: 1vw 4vw;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.wrapper .order-detailet li p {
	font-size: 3vw;
	color: #666;
}

/****************** 支付方式部分 ******************/
.wrapper .payment-type {
	width: 100%;
}

.wrapper .payment-type li {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;

	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
}

.wrapper .payment-type li img {
	width: 33vw;
	height: 8.9vw;
}

.wrapper .payment-type li .fa-check-circle {
	font-size: 5vw;
	color: #38CA73;
}

/****************** 选中的支付方式样式 ******************/
.wrapper .payment-type li.selected {
	border: 2px solid #38CA73;
}

/****************** 支付按钮 ******************/
.wrapper .payment-button {
	width: 100%;
	box-sizing: border-box;
	padding: 4vw;
}

.wrapper .payment-button button {
	width: 100%;
	height: 10vw;
	border: none;
	/*去掉外轮廓线*/
	outline: none;
	border-radius: 4px;
	background-color: royalblue;
	color: #fff;
}
</style>
